<template class="search-box">
    <div class="shop-Search">
        <Teleport to=".header">
            <Header 
            @searchBtnHandler="searchHandler"
            @searchChangeHandler="searchChangeHandler"></Header>
        </Teleport>
        <!-- 搜索列表的盒子 -->
        <ul v-if="listShow" class="search-list-box">
            <li @click="searchHandler(item.brand)" v-for="item in latestSearchList " :key="item.proid">
                <span>{{ item.brand }}</span>
                <span>{{ item.category }}</span>
            </li>
        </ul>

        <div :class="{ 'hidden':!searchHistoryList.length ,'box':true, 'search-history-box':true} " >
            <div class="top">
                <p>最近搜索</p>
                <van-icon @click="clearHistoryHandler" name="delete-o"/>
            </div>
            <ul class="bottom">
                <li @click='searchHandler(item)' v-for="item in searchHistoryList" :key="item">{{ item }}</li>
            </ul>
        </div>
        <div class="box search-hot-box">
            <div class="top">
                <p>热门搜索</p>
                <p style="color:#999" @click="hotHidden=!hotHidden">隐藏</p>
            </div>
            
            <div class="hot-search">
                <ul class="bottom " v-if="hotHidden" >
                <li @click="searchHandler(item.keyword)" v-for="item in searchHotList" :key="item.wordid">{{ item.keyword || '暂时没有' }}</li>
                </ul>
                <p v-else>已隐藏搜索发现</p>
            </div>
            
        </div>
    </div>
</template>

<script lang="ts" setup>
import {getSearchList,getSearchHotList } from '@/apis/goodsList'
import Header from '@/components/header.vue'
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
//准备一个变量，表示搜索列表是显示还是隐藏
const listShow = ref<boolean>(false)
//准备一个变量，表示的是热门搜索列表显示还是隐藏
const hotHidden = ref<boolean>(true)
//准备一个变量，表示最近搜索列表
const latestSearchList = ref([])
//准备一个变量，表示热门搜索列表
const searchHotList = ref([])
//准备一个变量，表示历史搜索列表
const searchHistoryList = ref<string[]>([])
const $router = useRouter() 

//热门搜索
const getHotList = async()=>{
    const res = await getSearchHotList()
    // console.log(res)
    searchHotList.value=res.data
}
// 点击按钮（点击热门搜索内容，点击历史搜索内容）
const searchHandler =(keyword:string)=>{
     // 向 searchChangeHandler 添加关键字
  searchHistoryList.value.unshift(keyword)
  //去重
  searchHistoryList.value=[...new Set(searchHistoryList.value)]
    //在跳转路由之前 把该关键字 放在localStorage 内
    window.localStorage.setItem('history', JSON.stringify(searchHistoryList.value))
    $router.push('/list')
}
//在搜索框内输入的内容
//由子组件传过来的内容
const searchChangeHandler =async(text:string)=>{
    console.log('你要搜索的是', text)
    if(!text){
        listShow.value=false
        return
    }
    text=text.replace('\\','')
    const res = await getSearchList(text)

    //如果没有找到相应的内容
    if(res.code==='10002'){
        listShow.value=false
        console.log(res)
        return
    }
    console.log(res)
    latestSearchList.value=res.data
    listShow.value=true

}
//清除历史记录
const clearHistoryHandler=()=>{
    searchHistoryList.value=[]
    window.localStorage.removeItem('history')
}
onMounted(()=>{
    getHotList()
    searchHistoryList.value = JSON.parse(window.localStorage.getItem('history') || '[]') || []

})
</script>

<style lang="scss" scoped>
.search-box{
    background-color: #fff;
}
.shop-Search{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.search-list-box{
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #fff;
    margin: -10px 0px 0;
    z-index: 999;
    > li{
        padding: 10px 20px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        font-size: 14px;
        height: 30px;

        :last-child{
            font-size: 12px;
            padding: 5px 10px;
            background-color: #f0f2f5;
            color: #686868;
        }
    }
}
.box{
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
}
.top{
    
    display: flex;
    justify-content: space-between;
}
.bottom{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.bottom li{
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    margin:5px;
    background-color: #fff;
    padding-left: 13px;
    padding-right: 13px;
    text-overflow: ellipsis;
    color: #686868;
}
.hidden{
    display: none;
}
.hot-search p{
    color: #686868;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>